<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="rolePage">
        <el-row>
          <el-col :sm="11">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="filter-item"
              @change="fetchData()"
            />
            <el-select
              v-model="workLines"
              placeholder="线别"
              clearable
              style="width: 90px"
              class="filter-item"
              @change="fetchData()"
            >
              <el-option
                v-for="(item, index) in workLinesList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :sm="13" style="text-align: left">
            <div class="title">良率数据统计</div>
          </el-col>
        </el-row>

      </div>
    </div>
    <el-row v-if="list.motionDate.length > 0" class="table">
      <table style="width: 100%" border="0" cellspacing="0">
        <thead>
          <tr>
            <th id="lineTd">
              <span style="float:left;margin-top:20px;">类别</span>
              <span style="float:right;margin-top:3px;">日期</span>
            </th>
            <th v-for="(item, index) in list.motionDate" :key="index">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>良率目标</td>
            <td v-for="(item, index) in list.goodDataGoal" :key="index">{{ item }}%</td>
          </tr>
          <tr>
            <td>检验数量</td>
            <td v-for="(item, index) in list.testQuantity" :key="index">{{ item }}</td>
          </tr>

          <tr>
            <td>B级数量</td>
            <td v-for="(item, index) in list.bQuantity" :key="index">{{ item }}</td>
          </tr>

          <tr>
            <td>报废数量</td>
            <td v-for="(item, index) in list.goQuantity" :key="index">{{ item }}</td>
          </tr>

          <tr>
            <td>报废率</td>
            <td v-for="(item, index) in list.goRates" :key="index">{{ item }}%</td>
          </tr>

          <tr>
            <td>原材降级</td>
            <td v-for="(item, index) in list.originalDemote" :key="index">{{ item }}</td>
          </tr>

          <tr>
            <td>原材降级率</td>
            <td v-for="(item, index) in list.originalDemoteRates" :key="index">{{ item }}%</td>
          </tr>

          <tr>
            <td>A级数量</td>
            <td v-for="(item, index) in list.aQuantity" :key="index">{{ item }}</td>
          </tr>

          <tr>
            <td>实际良率</td>
            <td v-for="(item, index) in list.actualGoodRates" :key="index">{{ item }}%</td>
          </tr>
        </tbody>
      </table>
    </el-row>

    <el-row
      style="background:#fff;padding:16px 16px 0;margin-bottom:32px;display: flex;justify-content: space-between;"
    >
      <line-chart :title-name="this.workLines + '线良率数据统计'" :chart-data="lineChartData" />
    </el-row>

  </div>
</template>
<script>
import './css/index.scss'
import { goodDataReport } from '@/api/report'
import LineChart from './components/YieldChart'
export default {
  components: {
    LineChart
  },
  data: function() {
    return {
      activeCardName: 'all',
      dialogFormVisible: false,
      dialogSee: false,
      workLines: '',
      workLinesList: [
        {
          label: '1线',
          value: '1'
        },
        {
          label: '2线',
          value: '2'
        },
        {
          label: '3线',
          value: '3'
        },
        {
          label: '4线',
          value: '4'
        }
      ],
      list: {
        motionDate: [],
        goodDataGoal: [],
        testQuantity: [],
        bQuantity: [],
        goQuantity: [],
        goRates: [],
        originalDemote: [],
        originalDemoteRates: [],
        aQuantity: [],
        actualGoodRates: []
      },
      dateRange: [],
      lineChartData: {
        timeList: [],
        motionGoal: [],
        name: '良率目标',
        name2: '实际良率',
        lineData: []

      }
    }
  },
  created() {
    // 获取数据
    // this.fetchData();
  },
  methods: {
    async fetchData() {
      const params = {
        pageNum: 1,
        pageSize: 100,

        workLines: '',
        starTime: '',
        endTime: ''
      }
      if (this.dateRange.length > 0) {
        const start = this.getTime(this.dateRange[0])
        const end = this.getTime(this.dateRange[1])
        params.starTime = start
        params.endTime = end
      } else {
        this.$message.error('需要选择时间范围')
      }
      if (this.workLines) {
        params.workLines = this.workLines
      } else {
        this.$message.error('需要选择线别')
      }
      if (params.starTime && params.endTime && params.workLines) {
        const data = await goodDataReport(params)
        this.list = this.formatDate(data.data)
      }

      this.lineChartData.timeList = this.list.motionDate
      this.lineChartData.motionGoal = this.list.goodDataGoal
      this.lineChartData.lineData = this.list.actualGoodRates

      console.log('list', this.list)
    },
    formatDate(data) {
      const list = {
        motionDate: [],
        goodDataGoal: [],
        testQuantity: [],
        bQuantity: [],
        goQuantity: [],
        goRates: [],
        originalDemote: [],
        originalDemoteRates: [],
        aQuantity: [],
        actualGoodRates: []
      }
      data.forEach(item => {
        if (item.goodDataId == 0) {
          list.motionDate.push('汇总')
        } else {
          list.motionDate.push(item.goodDataDate)
        }

        if (item.goodDataGoal.lastIndexOf('%') !== -1) {
          const motionGoalInt = parseInt(item.goodDataGoal.substring(0, item.goodDataGoal.lastIndexOf('%')))
          list.goodDataGoal.push(motionGoalInt)
        } else {
          list.goodDataGoal.push(item.goodDataGoal)
        }
        if (item.actualGoodRates.lastIndexOf('%') !== -1) {
          const actualGoodRatesInt = parseInt(item.actualGoodRates.substring(0, item.actualGoodRates.lastIndexOf('%')))
          list.actualGoodRates.push(actualGoodRatesInt)
        } else {
          list.actualGoodRates.push(item.actualGoodRates)
        }
        if (item.goRates.lastIndexOf('%') !== -1) {
          const goRatesInt = parseInt(item.goRates.substring(0, item.goRates.lastIndexOf('%')))
          list.goRates.push(goRatesInt)
        } else {
          list.goRates.push(item.goRates)
        }
        if (item.originalDemoteRates.lastIndexOf('%') !== -1) {
          const originalDemoteRatesInt = parseInt(item.originalDemoteRates.substring(0, item.originalDemoteRates.lastIndexOf('%')))
          list.originalDemoteRates.push(originalDemoteRatesInt)
        } else {
          list.originalDemoteRates.push(item.originalDemoteRates)
        }
        list.testQuantity.push(item.testQuantity)
        list.bQuantity.push(item.bQuantity)
        list.goQuantity.push(item.goQuantity)
        list.originalDemote.push(item.originalDemote)
        list.aQuantity.push(item.aQuantity)
      })
      return list
    },
    getTime(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '-' + m + '-' + d
    }
  }
}
</script>
<style lang="scss" scoped>
.userlist {
    margin-right: 10px;
}

#lineTd {
    background: #fff url() no-repeat 100% center;
}

.title {
    height: 20px;
    padding-left: 5px;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 23px;
    display: inline-block;
}

// table
.hidden {
    display: none;
}

table {
    border-collapse: separate;
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
}

thead tr th {
    background-color: #f8f8f9;
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}

tbody tr td {
    padding: 6px;
    text-align: center;
    height: 34px; //设置单元格最小高度
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}
</style>
